<script setup>
import { reactive } from 'vue'
import useScreenEvent from '@/core/hooks/useScreenEvent'
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/dist/sweetalert2.min.css'
import DemoInput from '@/components/DemoInput.vue'
const {scrollX, scrollY, clientW, clientH} = useScreenEvent()
// import {ref} from 'vue'
// import moduleApi from '@/api/system/ModuleApi'
// const data = ref([])
// moduleApi.getListData().then(res => {
//   if (res.code == 0) {
//     data.value = res.dataList
//   }
// })
// import { ref } from 'vue'
// const show = ref(false)

const state = reactive({
  name : 'Ricky'
})

// 
const swalWithBootstrapButtons = Swal.mixin({
  // customClass: {
  //   confirmButton: 'btn btn-success',
  //   cancelButton: 'btn btn-danger'
  // },
  buttonsStyling: false
})
const clickSwal =()=>{
  swalWithBootstrapButtons.fire({
    title: 'Are you sure?',
    text: 'You won\'t be able to revert this!',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, cancel!',
    reverseButtons: true
  }).then((result) => {
    if (result.isConfirmed) {
      swalWithBootstrapButtons.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      )
    } else if (
    /* Read more about handling dismissals below */
      result.dismiss === Swal.DismissReason.cancel
    ) {
      swalWithBootstrapButtons.fire(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
      )
    }
  })
}

const clickSwal2 = ()=>{
  Swal.fire({
    title: 'Do you want to save the changes?',
    showDenyButton: true,
    showCancelButton: true,
    confirmButtonText: 'Save',
    denyButtonText: 'Don\'t save',
  }).then((result) => {
  /* Read more about isConfirmed, isDenied below */
    if (result.isConfirmed) {
      Swal.fire('Saved!', '', 'success')
    } else if (result.isDenied) {
      Swal.fire('Changes are not saved', '', 'info')
    }
  })
}
</script>
<template>
  <a-card title="Default size card">
    <div v-hightlight> Hello World</div>
    <button @click="clickSwal">clickSwal </button>
    <button @click="clickSwal2">clickSwal2 </button>
    == {{ state.name }} ###
    <DemoInput v-model="state.name" />
    <div style="margin:80px 0 80px 200px">
      <div class="loader font1">
        <span>L</span>
        <span class="span2">O</span>
        <span class="span3">A</span>
        <span class="span4">D</span>
        <span class="span5">I</span>
        <span class="span6">N</span>
        <span class="span7">G</span>
      </div>

      <div class="loader font2">
        <span>L</span>
        <span class="span2">O</span>
        <span class="span3">A</span>
        <span class="span4">D</span>
        <span class="span5">I</span>
        <span class="span6">N</span>
        <span class="span7">G</span>
      </div>

      <div class="loader font3">
        <span>L</span>
        <span class="span2">O</span>
        <span class="span3">A</span>
        <span class="span4">D</span>
        <span class="span5">I</span>
        <span class="span6">N</span>
        <span class="span7">G</span>
        abcdefghijklmnopqrxtuvwxyz A B C D E F G H I J K L M N O P Q R X T U V W X Y Z 1234567890
      </div>

      <div class="loader font4">
        <span class="span2">4</span>
        <span class="span3">0</span>
        <span class="span4">4</span>
        <span class="span7">-</span>
        <span class="span5">N</span>
        <span class="span6">o</span>
        <span class="span7">t</span>
        <span>F</span>
        <span>u</span>
        <span>n</span>
        <span>d</span>

        <span class="span5">Page</span>
      </div>
    </div>
    scrollX =={{ scrollX }}, scrollY  =={{ scrollY }}, clientW  =={{ clientW }}, clientH =={{ clientH }}
  </a-card>
</template>

<style lang="less" scoped>
@-moz-keyframes loading {
  0%, 100% {
    -moz-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -moz-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -moz-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
@-webkit-keyframes loading {
  0%, 100% {
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}
@keyframes loading {
  0%, 100% {
    -moz-transform: scale(1) rotateZ(0deg);
    -ms-transform: scale(1) rotateZ(0deg);
    -webkit-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  26% {
    -moz-transform: scale(1.1) rotateZ(12deg);
    -ms-transform: scale(1.1) rotateZ(12deg);
    -webkit-transform: scale(1.1) rotateZ(12deg);
    transform: scale(1.1) rotateZ(12deg);
    opacity: .2;
  }

  76% {
    -moz-transform: scale(0.8) rotateZ(-8deg);
    -ms-transform: scale(0.8) rotateZ(-8deg);
    -webkit-transform: scale(0.8) rotateZ(-8deg);
    transform: scale(0.8) rotateZ(-8deg);
    opacity: .6;
  }
}

.loader {
  overflow: hidden;
  font-size: 45px;
}
.loader span {
  -moz-animation: loading 1s linear infinite -0.8s;
  -webkit-animation: loading 1s linear infinite -0.8s;
  animation: loading 1s linear infinite -0.8s;
  float: left;
}
.loader .span2 {
  -moz-animation: loading 1s linear infinite -0.2s;
  -webkit-animation: loading 1s linear infinite -0.2s;
  animation: loading 1s linear infinite -0.2s;
}
.loader .span3 {
  -moz-animation: loading 1s linear infinite -0.5s;
  -webkit-animation: loading 1s linear infinite -0.5s;
  animation: loading 1s linear infinite -0.5s;
}
.loader .span4 {
  -moz-animation: loading 1s linear infinite -1.1s;
  -webkit-animation: loading 1s linear infinite -1.1s;
  animation: loading 1s linear infinite -1.1s;
}
.loader .span5 {
  -moz-animation: loading 1s linear infinite -0.36s;
  -webkit-animation: loading 1s linear infinite -0.36s;
  animation: loading 1s linear infinite -0.36s;
}
.loader .span6 {
  -moz-animation: loading 1s linear infinite -0.65s;
  -webkit-animation: loading 1s linear infinite -0.65s;
  animation: loading 1s linear infinite -0.65s;
}
.loader .span7 {
  -moz-animation: loading 1s linear infinite -0.93s;
  -webkit-animation: loading 1s linear infinite -0.93s;
  animation: loading 1s linear infinite -0.93s;
}

.font1 {
  font-family: "Helvetica", Arial, sans-serif;
}

.font2 {
  font-family: Impact;
}

.font3 {
  font-family: "Webdings";
}

.font4 {
  font-family: "Comic Sans MS", sans-serif;
  font-weight: bold;
}
</style>